<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>帖子页面</title>
	<style>
		/*页头部分 勿改*/
        /*设置div背景色为white*/
        /*以下部分和页脚部分统一*/
        body{margin: 0px;
        background-color: #f9f9f9;  }
        a{text-decoration:none}
        .banner {
            z-index:99999;
            width:100%;
            height:70px;
            top:0;
            left:0;
            position: fixed;
            overflow: hidden;
            background: #fff;
            border-bottom: 1px solid rgba(30,35,42,.06);
            box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
            background-clip: content-box;
            background-color: white;
            filter:alpha(Opacity=50);
            opacity: 0.95;
        }
        #logo {
            margin-top: 11px;
            margin-left: 42px;
            width: 115px;
            height: 46px;

        }
        .searchDiv{
            position: absolute;
            top: 15px;
            left: 182px;
            height: 35px;
            width: 224px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
        }
        #search {
            float: left;
            margin-top: 1.4px;
            width: 185px;
            height: 30px;
            border: 0;
            background-color: transparent;
            font: 13px 微软雅黑;
        }
        #btnLeft{
            margin-left: 30px;
            width: 235px;
            position: absolute;
            right: 12.6%;
            top: 20px;
        }
        #searchicon{
            float: right;
            margin-top: 3.5px;
            width: 28px;
            height: 28px;
        }
        #hpBtn{
            width: 112px;
            height: 30px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
            background-color: white;
            font: normal 15px 微软雅黑 ;
            color: #666666;
            float: right;
        }
        #ppBtn{
            margin-right: 7px;
            float: right;
            width: 112px;
            height: 30px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
            background-color: white;
            font: normal 15px 微软雅黑 ;
            color: #666666;
        }
        /*页脚*/
        footer{
            bottom: 0;
            width: 100%;
            height: 60px;
            clear: both;
            padding-top: 20px;
            padding-bottom: 0;
        }
        #footer{
            text-align: center;
            background-color: white;
            height: 40px;
            width: 100%;
            margin-top: 20px;
            overflow: hidden;
            box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
            background-clip: content-box;
        }
        #footText{
            height: 20px;
            margin: 5px auto;
        }



        .main{
             margin:0 auto;
             width:1076px;
             height:auto;           
        }
        .banner-img{
            margin-top:90px;
            width:1076px;
            height:130px;
            background: aliceblue;
        }
        .topBtns{
            margin-top:30px;
            margin-left:20px;
            
        }
        #pageNum{
            width:30px;
        }
        .btns{
            border-radius: 3px;
			border: 1px solid #999999;
			background-color: white;
			font: normal 15px 微软雅黑 ;
        }
        .mainBlock{
            margin-top:10px;
            border-radius: 3px;
			border: 1px solid #999999;
			background-color: white;
        }
        .posts{
            width:100%;
            height:auto;
            margin-top:10px;
            
        }
        .posts-title{
            margin-top:10px;
            margin-left:20px;
            font: normal 18px 微软雅黑 ;
        }
        
        .user{
            width:100px;
            height:170px;           
            padding-right:50px; 
            text-align: center;          
        }
        #userImage{
            margin-top: 8px;
            border: 2px solid aliceblue;
            border-radius:50%;
        }
        #userName{
            
            font: normal 15px 微软雅黑 ;
        }
         
        .postsMain{
            margin-top:10px;
            margin-left:20px;
            margin-right:20px;
        }
        .posts-content{
            width:80%;
            position:relative; 
            float:right;
            top:-180px;       
            word-wrap: break-word; 
            word-break: normal; 
            
        }
        #passageText{
             font: normal 15px 微软雅黑 ;
        }
        .pager{
            margin-top:10px;
            margin-left:40px;
        }
        .commentArea{
            margin-top:10px;
            margin-left:20px;
            width:95%;
            border: 2px solid black;
            height:auto;
        }
        .commentInput{
            margin-top:10px;
            margin-left:20px;
            width:95%;
            border: 2px solid black;
            height:200px;
        }
        #btnSubmit{
            margin-top:10px;
            margin-left:20px;
        }

</style>
</head>
<body>
    <div class="banner">
        <img src="logologin.png" id="logo"/>
        <div class="searchDiv">
            <input type="text" name="keyword" id="search" placeholder=" 请输入您要搜索的关键字">
            <a href="https://www.baidu.com"><img src="搜索.png" id="searchicon" /></a>
        </div>
        <div id="btnLeft">
            <input type="button" name="homepage" id="hpBtn" value="个人中心">
            <input type="button" name="homepage" id="ppBtn" value="首页">
        </div>
    </div>
    <div class="main">
        <div class="banner-img">
            <img src="">
        </div>
        <div class="topBtns">
            <input type="button"  class="btns" name="return" id="btnReturn" value="返回">
            <input type="button" class="btns" name="previous" id="btnPrevious" value="上一页">
            <input type="button" class="btns" name="count" id="btnCount1" value="1">
            <input type="button" class="btns" name="count" id="btnCount2" value="2">
            <input type="button" class="btns" name="count" id="btnCount3" value="3">
            <input type="button" class="btns" name="next" id="btnNext" value="下一页">   
            跳转至：<input id="pageNum">        
            <input type="button" class="btns" name="next" id="btnNext" value="跳转">

        </div>
        <div class="mainBlock">
            <!--  -->
            <div class="posts">
                <div class="posts-title">
                    <b id=postsTitle>帖子标题标题标题标题标题标题标题标题标题标题标题标题</b>
                </div>
                <hr style=" width:96%;">
                
                <div class="postsMain">
                    <!-- 发帖人头像和用户名信息 -->
                    <div class="user">
                        <a href=""><img id="userImage" src="头像.png"  alt="" width="110" height="110" ></a>
                        <br><br>
                        <b id="userName">用户名XXX</b>
                    </div>
                    <!-- 此处为帖子的文字和图片部分 -->
                    <div class="posts-content">
                        <p id="passageText"> 
                        AAAAAAAAAAAAAAAAAAAABBBBBBBBBBBBCCCCCCCCDDDDDDDDDDDEEEEEEEUUUUFFFFFFGGGGGGGGG
                        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                        </p>
                    </div>
                    <!--帖子之间的分割线 -->
                    <hr style=" width:100%;">
                </div>
                
            </div>
            <div class="pager">
                    <input type="button" class="btns" name="previous" id="btnPrevious" value="上一页">
                    <input type="button" class="btns" name="count" id="btnCount1" value="1">
                    <input type="button" class="btns" name="count" id="btnCount2" value="2">
                    <input type="button" class="btns" name="count" id="btnCount3" value="3">
                    <input type="button" class="btns" name="next" id="btnNext" value="下一页">
                    跳转至：<input id="pageNum">           
                    <input type="button" class="btns" name="next" id="btnNext" value="跳转">
            </div>
            <div class="commentArea">
                <!--此处使用文本编辑插件 -->
                <div class="commentInput"></div>
                
                <input type="button" class="btns" name="submit" id="btnSubmit" value="发表">
            </div>
             
        </div>
        
    </div>
    <!--页脚部分-->
    <footer>
        <div id="footer">
            <div id="footText">
                <img src="giggleIcon.png" style="width: 20px;height: 20px;margin-bottom: -6px"   >
                <em style="font: 13px 微软雅黑;color: #999999;">giggle</em>
            <a href="https://www.baidu.com/" style="font: 13px 微软雅黑;color: #999999;margin-left: 15px">关于我们</a>
            <em style="font: 13px 微软雅黑;color: #999999;margin-left: 15px">© 2017 Zealers 版权所有</em>
            </div>
        </div>
    </footer>

</body>
</html>
